<!doctype html>

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <!-- this is an example from the MDN Layout Cookbook -->
    <title>CSS Cookbook: Grid Wrapper</title>

    <style>
      body {
        background-color: #fff;
        color: #333;
        font:
          1.2em / 1.5 Helvetica Neue,
          Helvetica,
          Arial,
          sans-serif;
        padding: 0;
        margin: 0;
      }

      .grid {
        display: grid;
        grid-template-columns: minmax(20px, 1fr) repeat(6, minmax(0, 130px)) minmax(
            20px,
            1fr
          );
        grid-auto-rows: minmax(100px, auto);
        grid-gap: 10px;
      }

      .grid > * {
        border: 2px solid rgb(95 97 110);
        border-radius: 0.5em;
        padding: 20px;
      }

      .full-width {
        grid-column: 1 / -1;
      }

      .wrapper {
        grid-column: 2 / -2;
      }

      .left-edge {
        grid-column: 1 / -2;
      }

      .right-wrapper {
        grid-column: 4 / -2;
      }
    </style>
  </head>

  <body>
    <div class="grid">
      <div class="wrapper">
        <p>
          This item aligns to a central “wrapper” – columns that have a maximum
          width.
        </p>
      </div>
      <div class="full-width">
        <p>This item aligns to the edge of the grid container.</p>
      </div>
      <div class="left-edge">
        <p>
          This item aligns to the left edge of the grid container and the right
          edge of the wrapper.
        </p>
      </div>
      <div class="right-wrapper">
        <p>This item aligns to the right edge of the “wrapper” columns.</p>
      </div>
    </div>
  </body>
</html>
